<template>
  <div class="bighome">
    <ul class="home" @click="close">
      <li class="navbar">
        <navbar ref="navbarb" @openturn="openTurn" @openlogin="opendialog" />
      </li>
      <li class="banner">
        <van-swipe :autoplay="6000" lazy-render touchable>
          <van-swipe-item v-for="image in images" :key="image">
            <Skeleton :loading="loadings">
              <template #ske>
                <van-skeleton-image style="width: 100%; height: 160px" />
              </template>
              <template #main> <img lazy="loading" v-lazy="image" /></template>
            </Skeleton>
          </van-swipe-item>
          <template #indicator="{ active, total }">
            <dl class="custom-indicator">
              <dd v-for="(item, index) in total" :class="[active == index ? 'active' : '']" :key="index"></dd>
            </dl>
          </template>
        </van-swipe>
      </li>
      <li class="notice">
        <Skeleton :loading="loadings">
          <template #ske>
            <div style="
                width: 100%;
                display: flex;
                height: 21px;
                justify-content: flex-start;
                align-items: center;
              ">
              <van-skeleton-avatar style="width: 13px; height: 13px; margin-right: 5px" />
              <van-skeleton-paragraph style="width: 100%; height: 100%" />
            </div>
          </template>
          <template #main>
            <div class="notice-item">
              <van-icon size="14" name="volume" color="#259a06" />
              <div></div>
            </div>
          </template>
        </Skeleton>
      </li>
      <li class="tablist">
        <div v-for="(item, index) in tablist" :key="index" @click="item.callback(index)">
          <Skeleton :loading="loadings">
            <template #ske>
              <div style="
                  width: 100%;
                  display: flex;
                  height: 21px;
                  justify-content: flex-start;
                  align-items: center;
                ">
                <van-skeleton-avatar style="width: 13px; height: 13px; margin-right: 5px" />
                <van-skeleton-paragraph style="width: 100%; height: 100%" />
              </div>
            </template>
            <template #main>
              <div :class="activeindex == index ? 'active' : ''">
                <img v-if="activeindex != index" v-lowlazy="item.img" alt="" />
                <img v-else v-lowlazy="item.imgactive" alt="" />
                <span>{{ $t(item.lang) }}</span>
              </div>
            </template>
          </Skeleton>
        </div>
      </li>
      <Transition name="fade">
        <li class="expend" v-if="[3, 6].includes(activeindex)">
          <div>
            <el-select v-model="value" class="select" popper-class="downselect" placeholder="Provedor"
              :fallback-placements="['bottom-start']" size="large">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select v-model="value" class="select" popper-class="downselect" placeholder="Tags"
              :fallback-placements="['bottom-start']" size="large">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select v-model="value" class="select" popper-class="downselect" placeholder="Jogar" size="large"
              :fallback-placements="['bottom-start']">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div>
            <el-input prefix-icon="Search" v-model="value1" class="searchinput" size="large" placeholder="" />
          </div>
        </li>
      </Transition>

      <li class="clist">
        <div class="clist-item" v-for="(item, index) in HomeGameList" :key="index">
          <Skeleton :loading="loadings">
            <template #ske>
              <div style="
                  display: flex;
                  justify-content: space-between;
                  height: 40px;
                  align-items: center;
                  width: 100%;
                ">
                <div style="
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    height: 28px;
                    width: 100%;
                    flex: 1;
                  ">
                  <van-skeleton-avatar style="width: 24px; height: 24px; margin-right: 10px" />
                  <van-skeleton-paragraph style="width: 60%; height: 100%" />
                </div>
                <van-skeleton-paragraph style="width: 28%; height: 20px; border-radius: 10px" />
              </div>
            </template>
            <template #main>
              <h4>
                <div>
                  <img v-lazy="getImg(item.namelogo)" src="" alt="" />
                  <strong>{{ $t(item.modulename) }}</strong>
                </div>
                <div @click="
      $openPage('/commonpage', { name: $t(item.modulename) })
      ">
                  All 6
                </div>
              </h4>
            </template>
          </Skeleton>

          <dl>
            <dd v-for="(child, ind) in item.children" :class="activeitem == item.modulename + ind ? 'moveY' : ''"
              @click="openurl(item.modulename + ind, child)" @mouseenter="activeitem = item.modulename + ind"
              @mouseleave="activeitem = ''" :key="item.modulename + ind">
              <Skeleton :loading="loadings">
                <template #ske>
                  <div style="width: 100%">
                    <van-skeleton-title style="width: 80%" />
                    <van-skeleton-image style="width: 100%; height: 170px; margin-top: 10px" />
                  </div>
                </template>
                <template #main>
                  <div class="item-center">
                    <span>{{ child.name }}</span>
                    <div>
                      <img class="target" v-lowlazy="getImg(child.topleft)" src="" alt="" />
                      <img lazy="loading" bg="color" v-lazy="getImg(child.img)" alt="" />
                    </div>
                  </div>
                </template>
              </Skeleton>
            </dd>
          </dl>
        </div>
      </li>
      <li class="turntable">
        <Skeleton :loading="loadings">
          <template #ske>
            <div style="
                width: 100%;
                padding: 0 10px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                flex-direction: column;
              ">
              <van-skeleton-image style="width: 100%; height: 140px" />
              <van-skeleton-paragraph style="width: 84%; height: 25px; margin-top: 10px" />
              <van-skeleton-paragraph style="width: 84%; height: 25px; margin-top: 10px" />
              <van-skeleton-paragraph style="width: 54%; height: 30px; margin-top: 10px" />
            </div>
          </template>
          <template #main>
            <div class="title">
              <img v-lazy="getImg('c25.png')" src="" alt="" />
              <span>{{ $t("language.home.module5") }}</span>
            </div>
            <img v-lazy="getImg('c16.jpg')" src="" alt="" />
            <p>
              {{ $t("language.home.module5text") }}
            </p>
            <div class="btn">{{ $t("language.home.module5btn") }}</div>
          </template>
        </Skeleton>
      </li>
      <li class="Provider">
        <Skeleton :loading="loadings">
          <template #ske>
            <div style="width: 100%; padding: 0 10px; margin-bottom: 5px">
              <div style="width: 40%; display: flex">
                <van-skeleton-avatar style="width: 24px; height: 24px; margin-right: 10px" />
                <van-skeleton-title style="width: 80%; height: 24px" />
              </div>
            </div>
          </template>
          <template #main>
            <div class="title">
              <img v-lowlazy="getImg('c26.png')" src="" alt="" />
              <span>{{ $t("language.home.module6") }}</span>
            </div>
          </template>
        </Skeleton>
        <dl>
          <dd v-for="(item, index) in imglist" :key="index">
            <Skeleton :loading="loadings">
              <template #ske>
                <van-skeleton-image image-size="20px" style="width: 100%; height: 20px" />
              </template>
              <template #main>
                <img v-lowlazy="item" alt="" />
              </template>
            </Skeleton>
          </dd>
        </dl>
      </li>
      <li class="fg">
        <Skeleton :loading="loadings">
          <template #ske>
            <van-skeleton-image style="width: 100%; height: 110px" />
          </template>
          <template #main>
            <img v-lazy="getImg('c30.jpg')" src="" alt="" />
          </template>
        </Skeleton>
      </li>
      <li class="bottom-second">
        <Skeleton :loading="loadings">
          <template #ske>
            <div style="
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
              ">
              <van-skeleton-paragraph style="width: 84%; height: 40px; margin-top: 20px" />
              <van-skeleton-paragraph style="width: 84%; height: 40px; margin-top: 20px" />
              <van-skeleton-paragraph style="width: 54%; height: 40px; margin-top: 20px" />
            </div>
          </template>
          <template #main>
            <h1>
              {{ $t("language.home.module7") }} <span>300%</span><br />
              {{ $t("language.home.module7no") }}
            </h1>
            <h1>{{ $t("language.home.module8") }}</h1>
            <div class="btn">
              {{ $t("language.home.module8btn") }}
            </div>
          </template>
        </Skeleton>
      </li>
    </ul>
    <Terouro ref="Terouros" />
    <turntables ref="turn" />
    <!-- <loginhome ref="dialogs" /> -->
  </div>
</template>
<script lang="ts"></script>
<script setup lang="ts" name="home">
import { HomeGameList } from "@/utils/gamelist.ts"
import {
  reactive,
  nextTick,
  defineAsyncComponent,
  onActivated,
  ref,
  onMounted,
  computed,
  getCurrentInstance
} from "vue";
import { useStore } from "vuex";
import * as CryptoJS from "crypto-js";
import { useRouter } from "vue-router"
let navbar = defineAsyncComponent(() => import("@/components/navbar.vue"));
let Terouro = defineAsyncComponent(() => import("@/components/Terouro.vue"));
let turntables = defineAsyncComponent(
  () => import("@/views/turntable/index.vue")
);
const { proxy } = getCurrentInstance()
const router = useRouter();
const store = useStore();
let coinType = computed(() => store.state.coinType)
let coininfo = computed(() => store.state.coininfo)
let info = computed(() => store.state.info)
let lang = computed(() => store.state.lang)
const getImg = (url) => {
  return new URL(`../../assets/img/${url}`, import.meta.url).href;
};
let loadings = ref(true);
let hastoken = computed(() => store.state.token);
onMounted(() => {
  // GetHttp("/WeatherForecast");
  nextTick(() => {
    // loadings.value = false;
    let time = setInterval(() => {
      loadings.value = false;
      clearInterval(time);
    }, 500);
  });
});
let activeitem = ref("");
//跳转游戏
let openurl = (item: string, bigitem) => {
  activeitem.value = item;
  if (bigitem.game_uid) {
    ElLoading.service({
      lock: true,
      background: 'rgba(0, 0, 0, 0.7)',
      customClass: 'el-loading'
    })
    let timestamp = new Date().getTime();
    let { totalCoins } = coininfo.value[coinType.value.toLowerCase()]
    let payload = {
      timestamp,
      agency_uid: "6cc66b6b809048859f15905547f49611",
      member_account: info.value.accounts,         
      game_uid: bigitem.game_uid,
      credit_amount:Number(totalCoins) /100,
      currency_code: coinType.value,
      language: 'en',
      home_url: "https://c.u7games.com/Game/v1.0/Web/Notify/Back",
      platform: 2
    }
    // let {totalCoins} =coininfo.value[coinType.value.toLowerCase()]
    // let payload = {
    //   timestamp,
    //   agency_uid: "6cc66b6b809048859f15905547f49611",
    //   member_account: '999',
    //   game_uid: bigitem.game_uid,
    //   credit_amount: "80000",
    //   currency_code: "BRL",
    //   language: "pt",
    //   home_url: "https://c.u7games.com/Game/v1.0/Web/Notify/Back",
    //   platform: 2
    // }
    console.log(payload, 'payload');
    //AES256加密
    const aes_key = CryptoJS.enc.Utf8.parse("ec42141e4fc04606a9de6dbb613a587a");
    function encryptAES256(data: string, aes_key: any): string {
      return CryptoJS.AES.encrypt(data, aes_key, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      }).toString();
    }
    //请求    
    proxy.$OtherHttp(`/game/v1`, 'post', {
      method: "dc80cff0e5a94e9cb48c8394877e962b",
      agency_uid: "6cc66b6b809048859f15905547f49611",//替换 key
      timestamp,
      payload: encryptAES256(JSON.stringify(payload), aes_key)
    }).then(({ data }) => {
      console.log(data);
      if (data.payload.game_launch_url) {
        router.push({ path: '/playGame', query: { path: data.payload.game_launch_url } })
        // window.open(data.payload.game_launch_url)
      }
    }).finally(() => {
      let time = setInterval(() => {
        ElLoading.service({
          lock: true,
          background: 'rgba(0, 0, 0, 0.7)',
          customClass: 'el-loading'
        }).close()
        clearInterval(time)
      }, 300)
    });



  }


};
let dialogs = ref(null);
let opendialog = (val) => {
  dialogs.value.open(val);
};

let Terouros = ref(null);
let openTerouro = () => {
  Terouros.value.opent();
};
let turn = ref(null);
let openTurn = () => {
  turn.value.open();
};
const value = ref("");
const value1 = ref("");

const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];

let activeindex = ref(0);
let navbarb = ref(null);
let close = () => {
  navbarb.value.opennav = false;
  console.log(navbarb.value, 999);
};
const images = reactive([
  getImg("banner.jpg"),
  getImg("banner1.jpg"),
  getImg("banner2.jpg"),
]);

const tablist = reactive([
  {
    lang: "language.home.tab1",
    img: getImg("tablist1.png"),
    imgactive: getImg("tablist1l.png"),
    callback: (index) => {
      activeindex.value = index;
    },
  },
  {
    lang: "language.home.tab2",
    img: getImg("tablist2.gif"),
    imgactive: getImg("tablist2.gif"),
    callback: (index) => {
      activeindex.value = index;
      openTurn();
    },
  },
  {
    lang: "language.home.tab3",
    img: getImg("tablist3.png"),
    imgactive: getImg("tablist3.png"),
    callback: (index) => {
      if (hastoken.value) {
        activeindex.value = index;
        openTerouro();
      } else {
        store.commit("SET_LOGIN", true);
      }
    },
  },
  {
    lang: "language.home.tab4",
    img: getImg("tablist4.png"),
    imgactive: getImg("tablist4l.png"),
    callback: (index) => {
      activeindex.value = index;
    },
  },
  {
    lang: "language.home.tab5",
    img: getImg("tablist5.png"),
    imgactive: getImg("tablist5l.png"),
    callback: (index) => {
      activeindex.value = index;
    },
  },
  {
    lang: "language.home.tab6",
    img: getImg("tablist6.png"),
    imgactive: getImg("tablist6l.png"),
    callback: (index) => {
      activeindex.value = index;
    },
  },
  {
    lang: "language.home.tab7",
    img: getImg("tablist7.png"),
    imgactive: getImg("tablist7l.png"),
    callback: (index) => {
      activeindex.value = index;
    },
  },
  {
    lang: "language.home.tab8",
    img: getImg("tablist8.png"),
    imgactive: getImg("tablist8l.png"),
    callback: (index) => {
      activeindex.value = index;
      router.push("/Star");
    },
  },
]);
let imglist = reactive([
  getImg("c17.png"),
  getImg("c18.png"),
  getImg("c19.png"),
  getImg("c20.png"),
  getImg("c21.png"),
  getImg("c22.png"),
  getImg("c23.png"),
  getImg("c24.png"),
]);

</script>
<style lang="scss">
.searchinput .is-focus,
.searchinput .el-input__inner {
  border-color: #0a906c !important;
  color: #fff;
}

.downselect {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;

  .el-select__wrapper {
    color: #fff !important;
  }

  .el-select__selected-item span {
    color: #fff !important;
  }

  .el-scrollbar__view {
    background-color: rgb(39, 42, 48) !important;
    color: #fff !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  .el-scrollbar__wrap {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  .el-select-dropdown {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background-color: rgb(39, 42, 48) !important;
  }

  .el-select-dropdown__list {
    background-color: rgb(39, 42, 48) !important;
    color: #fff !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  .el-popper__arrow::before {
    background-color: rgb(50, 53, 62) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .is-focus {
    border-color: rgb(0, 144, 109) !important;
  }

  .el-select-dropdown__item.selected {
    color: #fff !important;
    background-color: rgb(39, 42, 48) !important;
  }

  .el-input__inner {
    border-color: #0a906c !important;
    color: #fff !important;
  }

  .el-select-dropdown__item.selected {
    color: #fff !important;
    background-color: rgb(50, 53, 62) !important;
  }

  .el-select-dropdown__item.selected .selected-labe {
    color: #fff !important;
    background-color: rgb(50, 53, 62) !important;
  }

  .el-select-dropdown__item {
    background-color: rgb(50, 53, 62) !important;
    color: #b9bdc9 !important;
  }

  .el-select-dropdown__item:hover {
    color: #fff !important;
  }
}
</style>
<style lang="scss" scoped>
/*:deep(.is-focused) {
  border: 1px solid #0a906c;
}
:deep(.el-scrollbar__view) {
  background-color: rgb(39, 42, 48) !important;
  color: #fff !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
:deep(.el-select-dropdown) {
  background-color: rgb(39, 42, 48) !important;
  color: #fff !important;
}
:deep(.el-select-dropdown__list) {
  background-color: rgb(39, 42, 48) !important;
  color: #fff !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
:deep(.el-select-dropdown__item) {
  background-color: rgb(39, 42, 48) !important;
  color: #fff !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}*/
/*::v-deep .el-scrollbar__view {
  background-color: rgb(39, 42, 48) !important;
  color: #fff !important;
}
::v-deep .el-select-dropdown__list {
  background-color: rgb(39, 42, 48) !important;
  color: #fff !important;
}
::v-deep .el-select-dropdown__item {
  background-color: rgb(39, 42, 48) !important;
  color: #fff !important;
}*/
.bighome {
  width: 100%;
  min-height: 100vh;

  .home {
    width: 100%;
    min-height: 100vh;
    padding: 40px 0px 0;

    .navbar {
      width: 100vw;
      height: 40px;
      position: fixed;
      z-index: 99;
      top: 0;
      left: 0;
    }

    .banner {
      padding: 0 10px;

      .van-swipe {
        width: 100% !important;

        img {
          width: 100%;
          height: 160px;
          border-radius: 5px;
        }

        .custom-indicator {
          position: absolute;
          width: 100%;
          left: 0;
          bottom: 0;
          @include flex(row, center, center);
          height: 26px;

          dd {
            width: 14px;
            height: 2px;
            background-color: #eeeeeed2;
          }

          dd+dd {
            margin-left: 10px;
          }

          .active {
            background-color: #fff;
          }
        }
      }
    }

    .notice {
      height: 21px;
      margin: 5px 0;
      padding: 0 10px;

      .notice-item {
        height: 100%;
        padding: 0 5px;
        background-color: #0f1012;
        @include flex(row, space-between, center);
        border-radius: 5px;

        div {
          flex: 1;
          height: 100%;
        }
      }
    }

    .tablist {
      width: 100%;
      padding: 3px 10px 15px;
      overflow-x: auto;
      @include flex(row, flex-start, center);
      flex-wrap: nowrap;

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
      }

      .active {
        background-color: #0a906c;

        span {
          color: #fff;
        }
      }

      div {
        background-color: #32353e;
        height: 36px;
        line-height: 36px;
        border-radius: 5px;

        div {
          padding: 0 10px;
          @include flex(row, flex-start, center);

          img {
            width: 22px;
            margin-right: 6px;
          }

          span {
            font-size: 16px;
            color: #b5bac8;
            height: 100%;
            white-space: nowrap;
          }
        }
      }

      div+div {
        margin-left: 10px;
      }
    }

    .expend {
      >div {
        margin-bottom: 10px;
      }

      >div:nth-child(1) {
        @include flex(row, space-between, center);

        .select+.select {
          margin-left: 10px;
        }
      }

      :deep(.el-select__wrapper) {
        background-color: rgb(39, 42, 48);
        box-shadow: none;
        border: 1px solid #4a4c53;
        border-radius: 10px;
        color: #fff !important;
      }

      :deep(.el-input__wrapper) {
        background-color: rgb(39, 42, 48);
        border-radius: 10px;
        box-shadow: none;
        border: 1px solid #4a4c53;
        color: #fff !important;
        height: 40px;
      }

      :deep(.el-select-dropdown__item.selected) {
        color: #fff !important;
        background-color: rgb(39, 42, 48) !important;
      }

      :deep(.el-select-dropdown .el-select-dropdown__item.selected) {
        color: #fff !important;
        background-color: rgb(39, 42, 48) !important;
      }

      :deep(.el-scrollbar__view) {
        background-color: rgb(39, 42, 48) !important;
        color: #fff !important;
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
      }

      :deep(.el-scrollbar__wrap) {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
      }

      :deep(.el-select-dropdown) {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
        background-color: rgb(39, 42, 48) !important;
      }

      :deep(.el-select-dropdown__list) {
        background-color: rgb(39, 42, 48) !important;
        color: #fff !important;
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
      }

      :deep(.el-popper__arrow::before) {
        background-color: rgb(50, 53, 62) !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
      }

      :deep(.el-select-dropdown__item) {
        background-color: rgb(39, 42, 48) !important;
        color: #fff !important;
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
      }
    }

    .clist {
      width: 100%;

      .clist-item {
        padding: 0 10px;
        width: 100%;
        background: url("../../assets/img/game_bg.png") no-repeat;
        background-size: cover;

        h4 {
          @include flex(row, space-between, center);
          height: 40px;

          div:nth-child(1) {
            @include flex(row, flex-start, center);
            height: 100%;

            img {
              width: 24px;
              height: 24px;
              margin-right: 10px;
            }

            strong {
              font-size: 20px;
              color: #fff;
            }
          }

          div:nth-child(2) {
            height: 100%;
            width: 26%;
            color: #95979e;
            font-size: 12px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            background-color: #2d2e32;
            border-radius: 11px;
          }
        }

        dl {
          @include flex(row, space-between, flex-start);
          width: 100%;
          flex-wrap: wrap;

          .moveY {
            transform: translateY(-15px);
          }

          dd {
            padding-top: 14px;
            transition: all 0.5s ease-out;
            transform: translateY(0);
            cursor: pointer;
            width: 31%;

            .item-center {
              width: 100%;

              span {
                font-size: 16px;
                color: #fff;
                display: block;
                margin-bottom: 10px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              div {
                position: relative;
                min-height: 130px;
                max-width: 400px;

                img {
                  width: 100%;
                  border-radius: 10px;
                  @include flex(row, center, center);
                }

                .target {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 50px;
                  height: 40px;
                }
              }
            }
          }
        }
      }

      .clist-item+.clist-item {
        margin-top: 10px;
      }
    }

    .turntable {
      width: 100%;
      position: relative;
      margin-top: 10px;

      .title {
        position: absolute;
        left: 10px;
        top: 10px;
        height: 24px;
        @include flex(row, flex-start, center);

        img {
          height: 24px;
          width: 24px;
          margin-right: 5px;
        }

        span {
          font-size: 15px;
          color: #fff;
        }
      }

      >img {
        width: 100%;
      }

      p {
        font-size: 16px;
        margin: 16px 0;
        text-align: center;
        color: #fff;
      }

      .btn {
        width: 70%;
        margin: 0 auto;
        height: 42px;
        border-radius: 5px;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
        line-height: 42px;
        color: #fff;
        background-color: rgb(37, 154, 6);
      }
    }

    .Provider {
      padding-top: 20px;
      background-color: #1a1a1a;

      .title {
        height: 36px;
        line-height: 36px;
        margin-left: 10px;

        img {
          width: 24px;
          height: 24px;
          margin-right: 15px;
        }

        span {
          font-size: 24px;
          color: #fff;
        }
      }

      dl {
        width: 100%;
        padding: 3px 10px 15px;
        overflow-x: auto;
        @include flex(row, flex-start, center);
        flex-wrap: nowrap;

        &::-webkit-scrollbar {
          width: 0;
          height: 0;
          display: none;
        }

        dd {
          background-color: #32353e;
          height: 36px;
          line-height: 36px;
          border-radius: 5px;
          padding: 0 10px;
          @include flex(row, flex-start, center);

          img {
            height: 23px;
          }
        }

        dd+dd {
          margin-left: 10px;
        }
      }
    }

    .fg {
      width: 100%;
      height: 170px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .bottom-second {
      background-image: linear-gradient(0deg, #111214, #24262b 87%);
      width: 100%;
      padding: 24px 0 20px 0;

      h1 {
        width: 260px;
        font-size: 32px;
        color: #fff;
        margin: 0px auto 24px;

        span {
          font-size: 32px;
          color: rgb(102, 185, 102);
        }
      }

      .btn {
        width: 32%;
        margin: 0 auto;
        height: 42px;
        border-radius: 5px;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
        line-height: 42px;
        color: #fff;
        background-color: rgb(37, 154, 6);
      }
    }
  }
}
</style>
